﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@model YaAppoint.Web.Pages.Appointments.HisAppoint.IndexModel
@await Component.InvokeAsync("IntervalWidget")
@await Component.InvokeAsync("IntervalBoxWidget")
@{
    Layout = null;
}
<!DOCTYPE HTML>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>YAApppint门诊预约</title>
    <link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="/Pages/Appointments/HisAppoint/Index.css" />
</head>
<body>
    <script src="/libs/jquery/jquery.js"></script>
    <script src="/js/Axios/axios.min.js"></script>
    <script src="~/js/dayjs/dayjs.min.js"></script>
    <script src="/js/Common.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="/Pages/Appointments/HisAppoint/Index.cshtml.js"></script>
    <div class="container" style="width:100%;">
        <div class="content-container1">
            <div id="app">
                <div class="page-header">
                    <div class="brand-image" >
                        <img src="~/images/logo/yalogo.png" style="width:45px;height:35px" />
                    </div>
                    <div class="hosipital-name" >
                        <span style="color:#fff;font-size:18px;">{{hospitalName}}</span>
                        <span style="color:#fff;font-size:13px;padding-left:15px;">(临床预约)</span>
                    </div>
                </div>
                <div style="padding-left:10px;padding-right:10px;display:flex;flex-direction:column;gap:10px;flex:1">
                    <!--患者信息-->
                    <div class="patient-infor-container">
                        <div class="patinet-info">
                            <div class="left-decoration">
                            </div>
                            <div class="patient-info-content">
                                <div class="info-item">
                                    <span class="info-label">姓名：</span>
                                    <span class="info-value">{{patient.name}}</span>
                                </div>
                                <div class="info-item" v-if="patient.patientId">
                                    <span class="info-label">患者ID：</span>
                                    <span class="info-value">{{patient.patientId}}</span>
                                </div>
                                <div class="info-item" v-if="patient.patientType">
                                    <span class="info-label">患者来自：</span>
                                    <span class="info-value">{{patient.patientType}}</span>
                                </div>
                                <div class="info-item" v-if="patient.sex">
                                    <span class="info-label">性别：</span>
                                    <span class="info-value" v-if="patient.sex===0">男</span>
                                    <span class="info-value" v-else-if="patient.sex===1">女</span>
                                    <span class="info-value" v-else-if="patient.sex===2">不详</span>
                                </div>
                                <div class="info-item" v-if="patient.age">
                                    <span class="info-label">年龄：</span>
                                    <span class="info-value">{{patient.age}}</span>
                                </div>
                                <div class="info-item" v-else>
                                    <span class="info-label">年龄：</span>
                                    <span class="info-value" v-if="patient.ageUnit===0"> {{patient.ageValue}}岁</span>
                                    <span class="info-value" v-if="patient.ageUnit===1"> {{patient.ageValue}}月</span>
                                    <span class="info-value" v-if="patient.ageUnit===2"> {{patient.ageValue}}天</span>
                                    <span class="info-value" v-if="patient.ageUnit===3"> {{patient.ageValue}}时</span>
                                </div>

                                <div class="info-item" v-if="patient.birthDate">
                                    <span class="info-label">出生日期：</span>
                                    <span class="info-value">{{patient.birthDate}}</span>
                                </div>
                                <div class="info-item" v-if="patient.parentName">
                                    <span class="info-label">家属：</span>
                                    <span class="info-value">{{patient.parentName}}</span>
                                </div>
                                <div class="info-item" v-if="patient.idCardNumber">
                                    <span class="info-label">证件号：</span>
                                    <span class="info-value">{{patient.idCardNumber}}</span>
                                </div>
                                <div class="info-item" v-if="patient.medicalInsuranceType">
                                    <span class="info-label">医保类型：</span>
                                    <span class="info-value">{{patient.medicalInsuranceType}}</span>
                                </div>
                                <div class="info-item" v-if="patient.medicalInsuranceNumber">
                                    <span class="info-label">医保卡号：</span>
                                    <span class="info-value">{{patient.medicalInsuranceNumber}}</span>
                                </div>
                                <div class="info-item" v-if="patient.phoneNumber">
                                    <span class="info-label">联系方式：</span>
                                    <span class="info-value">{{patient.phoneNumber}}</span>
                                </div>
                                <div class="info-item" v-if="patient.ethnicGroup">
                                    <span class="info-label">民族：</span>
                                    <span class="info-value">{{patient.ethnicGroup}}</span>
                                </div>
                                <div class="info-item" v-if="patient.isPregnancy && patient.LastMenstruationDateStr">
                                    <span class="info-label">末次月经：</span>
                                    <span class="info-value">{{patient.LastMenstruationDateStr}}</span>
                                </div>
                                <div class="info-item" v-if="patient.isPregnancy && patient.sex===1">
                                    <span class="info-label">怀孕：</span>
                                    <el-checkbox v-model="patient.isPregnancy"></el-checkbox>
                                </div>
                                <div class="info-item" v-if="patient.isPregnancy && patient.sex===1 && patient.gestationalWeek">
                                    <span class="info-label">孕周：</span>
                                    <span class="info-value">{{patient.gestationalWeek}}</span>
                                </div>
                                <div class="info-item" v-if="patient.isEmergency">
                                    <span style="font-weight:bold;color:#E6A23C">急诊</span>
                                </div>
                            </div>
                            <div class="tool-bar" v-if="showConfirm">
                                <el-button  type="primary" v-on:click="confirm">确认</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="body-container" >
                        <div class="body-left">
                            <!--申请项目列表-->
                            <div class="apply-item-contianer">
                                <div class="toolbar-container">
                                    <div class="un-apppoint-toolbar" v-if="activeTabName==='noAppoints' ">
                                        <div class="selected-count">
                                            <span>已选<span style="color:#409EFF">{{selectedNoAppointRows.length}}</span>  项</span>
                                        </div>
                                        <div class="button-container" v-show="selectedNoAppointRows.length>0">
                                                <el-button size="mini"
                                                           type="primary"
                                                           plain
                                                           v-on:click="getSuggestIntervals">
                                                    推荐号段
                                                </el-button>
                                                <el-button size="mini" 
                                                           type="primary" 
                                                           plain
                                                       v-on:click="submit">
                                                           预约
                                                </el-button>
                                        </div>
                                    </div>
                                    <div class="appointed-toolbar" v-else>
                                        <div class="selected-count">
                                            <span>已选 {{selectedAppointedRows.length}} 项</span>
                                        </div>
                                        <div class="button-container" v-show="selectedAppointedRows.length>0">
                                            <el-button size="mini" 
                                                       type="primary" 
                                                       plain 
                                                       v-on:click="getSuggestIntervals">
                                                       推荐号段
                                            </el-button>
                                            <el-button size="mini" type="primary" plain v-on:click="submitEdit">修改</el-button>
                                            <el-button size="mini" type="primary" plain v-on:click="cancel" v-show="showCancel">取消</el-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-container">
                                    <el-tabs style="height:100%;border:none;"  v-model="activeTabName">
                                        <el-tab-pane name="appointeds">
                                            <span slot="label"><el-badge type="success" :value="appointeds.length" class="dadadad"> 已预约 </el-badge></span>
                                            <el-table :data="appointeds"
                                                      empty-text="无已预约项目"
                                                      :height="tableHeight"
                                                      size="mini"
                                                      class="el-table"
                                                      @* v-on:row-click="apppointedRowClick" *@
                                                      row-key="id"
                                                      ref="appointed-table"
                                                      highlight-selection-row
                                                      highlight-current-row
                                                      :v-loading="appointedsLoading"
                                                      element-loading-text="拼命加载中"
                                                      element-loading-spinner="el-icon-loading"
                                                      element-loading-background="rgba(0, 0, 0, 0.8)"
                                                      v-on:selection-change="selectedAppointedChangeHandler"
                                                      style="border-radius:5px;">
                                                <el-table-column type="selection"
                                                                 :selectable="getAppointedSelectable"
                                                                 :reserve-selection="reserveSelectionAppointed">
                                                </el-table-column>
                                                <el-table-column label="申请项目" width="170" property="examItemName">

                                                </el-table-column>
                                                <el-table-column label="姓名" width="70" property="name">

                                                </el-table-column>
                                                <el-table-column label="预约信息" width="250">
                                                    <template slot-scope="scope">
                                                        <span v-if="scope.row.edited" style="color:#409EFF">{{scope.row.appointment}}</span>
                                                        <span v-else style="color:#909399">{{scope.row.appointment}}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="设备类型" width="100" property="deviceTypeName">

                                                </el-table-column>

                                                <el-table-column label="项目编号" width="100" property="examItemNumber">

                                                </el-table-column>
                                                <el-table-column label="申请单号" width="100" property="applyNumber">

                                                </el-table-column>
                                                <el-table-column label="申请时间" width="100" property="applyTime">

                                                </el-table-column>
                                                <el-table-column label="项目费用" property="examItemFee">

                                                </el-table-column>
                                                
                                            </el-table>
                                        </el-tab-pane>
                                        <el-tab-pane name="noAppoints">
                                            <span slot="label"><el-badge type="info" :value="noAppoints.length" class="sdsads">未预约</el-badge></span>
                                            <el-table :data="noAppoints"
                                                      empty-text="无未预约项目"
                                                      :height="tableHeight"
                                                      size="mini"
                                                      class="el-table"
                                                      row-key="id"
                                                      ref="noAppoint-table"
                                                      @* v-on:row-click="noApppointRowClick" *@
                                                      highlight-selection-row
                                                      highlight-current-row
                                                      :v-loading="noAppointsLoading"
                                                      element-loading-text="拼命加载中"
                                                      element-loading-spinner="el-icon-loading"
                                                      element-loading-background="rgba(0, 0, 0, 0.8)"
                                                      v-on:selection-change="selectedNoAppointChangeHandler"
                                                      style="border-radius:5px;">
                                                <el-table-column type="selection"
                                                                 :selectable="getNoAppointSelectable"
                                                                 :reserve-selection="reserveSelectionNoAppoint">
                                                </el-table-column>
                                                <el-table-column label="申请项目" width="170" property="examItemName">

                                                </el-table-column>
                                                <el-table-column label="姓名" width="70" property="name">

                                                </el-table-column>
                                                <el-table-column label="预约信息" width="250">
                                                    <template slot-scope="scope">
                                                        <span v-if="scope.row.edited" style="color:#409EFF">{{scope.row.appointment}}</span>
                                                        <span v-else style="color:#909399"></span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="设备类型" width="100" property="deviceTypeName">

                                                </el-table-column>

                                                <el-table-column label="项目编号" width="100" property="examItemNumber">

                                                </el-table-column>
                                                <el-table-column label="申请单号" width="100" property="applyNumber">

                                                </el-table-column>
                                                <el-table-column label="申请时间" width="100" property="applyTime">

                                                </el-table-column>
                                                <el-table-column label="项目费用" property="examItemFee">

                                                </el-table-column>
                                                
                                            </el-table>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </div>
                           @*  <!--申请单信息-->
                            <div class="apply-info-container">
                            </div> *@
                        </div>
                        <div class="body-right" ref="body-right">
                            <div class="right-container">
                                <div class="date-picker-container">
                                    <el-date-picker v-show="activeTabName==='appointeds'"
                                                    style="width:100%;"
                                                    v-model="appointedDate"
                                                    align="center"
                                                    size="min"
                                                    type="date"
                                                    placeholder="选择预约日期"
                                                    :picker-options="pickerOptions">
                                    </el-date-picker>
                                    <el-date-picker v-show="activeTabName==='noAppoints'"
                                                    style="width:100%;"
                                                    v-model="noAppointDate" 
                                                    align="center"
                                                    size="min"
                                                    type="date"
                                                    placeholder="选择预约日期"
                                                    :picker-options="pickerOptions">
                                    </el-date-picker>
                                </div>
                                <div class="interval-box-container">
                                    <!--已预约号段-->
                                    <interval-box ref="appointedIntervalBox" style="margin-top:20px;" v-show="activeTabName==='appointeds'" v-model="appointedSelectedIntervalId"
                                                                                        :date="appointedDate"
                                                                                        v-on:change-value="appointedInteverChangeHandler"
                                                                                        :apply-items="selectedAppointedRows">
                                    </interval-box>

                                    <!--未预约号段-->
                                    <interval-box ref="noAppointIntervalBox" style="margin-top:20px;" v-show="activeTabName==='noAppoints'" v-model="noAppointSelectedIntervalId"
                                                                                      v-on:change-value="noAppointIntervalChangeHandler"
                                                                                      :apply-items="selectedNoAppointRows"
                                                                                      :date="noAppointDate">
                                    </interval-box>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>